<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<script type="application/javascript">
    $(function () {
        $("#menuSaveBtn").click(function () {
            // 收集表单项中用户输入的数据
            var name = $.trim($("#menuAddModal [name=name]").val());
            var url = $.trim($("#menuAddModal [name=url]").val());
            // 单选按钮要定位到“被选中”的那一个
            var icon = $("#menuAddModal [name=icon]:checked").val();
            // 发送 Ajax 请求
            $.ajax({
                "url": "menu/save.json",
                "type": "post",
                "data": {
                    "pid": window.pid,
                    "name": name,
                    "url": url,
                    "icon": icon
                },
                "dataType": "json",
                "success": function (response) {
                    var result = response.result;
                    if (result == "SUCCESS") {
                        layer.msg("操作成功！");
                        // 重新加载树形结构，注意：要在确认服务器端完成保存操作后再刷新
                        // 否则有可能刷新不到最新的数据，因为这里是异步的
                        generateTree();
                    }
                    if (result == "FAILED") {
                        layer.msg("操作失败！" + response.message);
                    }
                },
                "error": function (response) {
                    layer.msg(response.status + " " + response.statusText);
                }
            });
            // 关闭模态框
            $("#menuAddModal").modal("hide");
            // // 清空表单        jQuery 对象调用 click()函数，里面不传任何参数，相当于用户点击了一下
        });
    })

</script>

<div id="menuAddModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">尚筹网系统弹窗</h4>
            </div>
            <div class="modal-body">
                <form class="form-signin" role="form">
                    <div class="form-group has-success has-feedback">
                        <input type="text" name="name" class="form-control"
                               id="inputSuccess4" placeholder="请输入需要添加的子节点名称" autofocus>
                        <br/>
                        <input type="text" name="url" class="form-control" placeholder="请输入需要添加的子节点URL" autofocus>
                        <br/>
                        <i class="glyphicon glyphicon-th-list"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-th-list" />&nbsp;

                        <i class="glyphicon glyphicon-dashboard"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-dashboard" /> &nbsp;

                        <i class="glyphicon glyphicon glyphicon-tasks"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon glyphicon-tasks" /> &nbsp;

                        <i class="glyphicon glyphicon-user"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-user" /> &nbsp;

                        <i class="glyphicon glyphicon-king"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-king" /> &nbsp;

                        <i class="glyphicon glyphicon-lock"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-lock" /> &nbsp;

                        <i class="glyphicon glyphicon-ok"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-ok" /> &nbsp;

                        <i class="glyphicon glyphicon-check"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-check" /> &nbsp;

                        <i class="glyphicon glyphicon-th-large"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-th-large" /> <br />

                        <i class="glyphicon glyphicon-picture"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-picture" /> &nbsp;

                        <i class="glyphicon glyphicon-equalizer"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-equalizer" /> &nbsp;

                        <i class="glyphicon glyphicon-random"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-random" /> &nbsp;

                        <i class="glyphicon glyphicon-hdd"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-hdd" /> &nbsp;

                        <i class="glyphicon glyphicon-comment"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-comment" /> &nbsp;

                        <i class="glyphicon glyphicon-list"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-list" /> &nbsp;

                        <i class="glyphicon glyphicon-tags"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-tags" /> &nbsp;

                        <i class="glyphicon glyphicon-list-alt"></i>
                        <input type="radio" name="icon" value="glyphicon glyphicon-list-alt" /> &nbsp;
                        <br />
                    </div>
                    <div class="modal-footer">
                        <button id="menuSaveBtn" type="button" class="btn btn-primary"> 添 加
                        </button>
                        <button id="menuResetBtn" type="reset" class="btn btn-primary"> 重 置
                        </button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>